<template>
	<view class="container">
		<!-- <img class="avatarImg" :src="form.avatar" /> -->
		<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatarImg" :src="form.avatar"></image>
		</button>


		<!-- <view class="nickname-wrap">
			<view class="title">昵称</view>
		</view> -->
		<view type="nickname" class="infInput-group" style="margin-top: 40rpx;">
			<input type="nickname" class="infInput" v-model="form.nickName" placeholder="请输入昵称" />
			<!-- <input class="infInput" type="text" placeholder="请输入姓名" v-model="form.nickName" /> -->
		</view>
		<view class="infInput-group ">
			<!-- <input class="infInput" type="number" placeholder="请输入性别" v-model="form.gender" /> -->
			<view>
				<radio-group>
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
						<radio :value="item.value" :checked="form.gender === item.value" color="darkred"
							@click="chooseSex(item)" />
						<span>{{item.label}}</span>
					</label>
				</radio-group>
			</view>
		</view>

		<view class="infInput-group">
			<input class="infInput" placeholder="请输入地址" v-model="form.address" />
		</view>

		<!-- 	<view class="openId">
			{{form.wxOpenId}}
		</view> -->
		<button class="updateBtn" @click="submitUserInf">提交</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/store/index.js'
	const useUser = useUserStore();
	const chooseSex = (item) => {
		console.log(item)
		form.value.gender = item.value
		console.log(item.value)
	}

	let sex = [{
		label: "男",
		value: 1,
	}, {
		label: "女",
		value: 2,
	}, {
		label: '保密',
		value: 0
	}]

	const form = ref({
		wxOpenId: useUser.openId,
		nickName: '',
		gender: 1,
		address: '',
		avatar: '',
		password: '123456'
	});
	import {
		wxAddUserInf
	} from '@/apis/login.js'
	const userInf = ref()

	const a = 1;
	const submitUserInf = () => {
		console.log(form.value, "xxx")
		const nickNameRegex = /^[\u4e00-\u9fa5a-zA-Z]+$/;
		if (!nickNameRegex.test(form.value.nickName)) {
			uni.showToast({
				title: '昵称必须为中文、英文',
				icon: 'none'
			});
			return;
		}
		if (!form.value.nickName) {
			// 如果昵称为空，则提示用户
			uni.showToast({
				title: '昵称不能为空',
				icon: 'none'
			});
			return; // 停止执行后面的代码
		}

		// 使用正则表达式验证昵称是否只包含中文、英文或表情符号

		// 如果昵称验证通过，则执行后面的代码
		console.log(form.value, "xxx")
		wxAddUserInf(form.value).then(res => {
			console.log(res)
			uni.navigateBack({
				delta: 1
			})
			useUser.userProfile = res.data
		}).catch(err => {
			console.log(err)
		})
	}

	onLoad(() => {
		console.log('2')
	})


	const onChooseAvatar = (e) => {
		console.log(e.detail, "A")
		form.value.avatar = e.detail.avatarUrl
	}
	//废了wxu
	const wxu = (e) => {

		wx.login().then(res => {

		})
		wx.getUserProfile({
			desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: (res) => {
				userInf.value = res.userInfo
				// console.log(userInf.value)

				form.value.nickName = userInf.value.nickName
				form.value.gender = userInf.value.gender
				form.value.address = userInf.value.address
				// form.value.avatar = userInf.value.avatarUrl

				// console.log(form.value)
			}
		})
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.avatarBtn {
			padding: 0 !important;
			margin: 0;
			height: 260rpx;
			// width: 260rpx;

			.avatarImg {
				padding: 0 !important;
				height: 260rpx;
				width: 260rpx;
				// border: 2px black solid;
				border-radius: 5rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}

		}

		.WxMsgBtn {
			padding: 4rpx;
			color: white;
			background-color: darkred;
		}

		.infInput-group {
			margin-bottom: 10px;

		}

		.infInput {
			border: 1px solid black;
			padding: 8px;
			border-radius: 4px;
			width: 80vw;
		}

		.chostInput {
			background-color: darkred;
			color: white;
		}

		.updateBtn {
			background-color: darkred;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.openId {
			font-size: 20rpx;
			color: grey;
		}
	}
</style>